<template>
  <div class="carousel">
    <!-- 饿了么轮播图 -->
    <el-carousel trigger="click" autoplay>
      <el-carousel-item v-for="item in 4" :key="item">
        <img :src="url" alt="" />
        <h3>标题</h3>
      </el-carousel-item>
      <!-- 使用 加载 loading组件 -->
      <div class="loadingBox">
        <Loading></Loading>
      </div>
    </el-carousel>
  </div>
</template>

<script>
  //  引入 加载组件
  import Loading from '@/components/loading/loading01.vue';
  export default {
    name: 'carrousel',
    components: {
      Loading,
    },
    data() {
      return {
        url: '',
      };
    },
    created() {
      setTimeout(() => {
        this.url = 'https://tu.ltyuanfang.cn/api/fengjing.php?_r=132';
      }, 2000);
    },
  };
</script>
<style lang="less" scoped>
  @import url('../../state/css/carousel/carousel.css');
  .carousel {
    .autoplay {
      position: relative;
      .loadingBox {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        transform: translate(-50%);
      }
    }
  }
</style>
